<template>
  <div class="post-list">
    <div v-if="posts?.length !== 0">
      <el-card
        class="post-card"
        body-style="display:flex;"
        v-for="post in posts"
        @click="router.push(`/post-detail?id=${post.id}`)"
      >
        <el-image
          class="avatar"
          :src="post.author?.avatar"
          style="width: 48px; height: 48px"
        ></el-image>
        <div class="post-info">
          <div class="psot-title">
            <router-link :to="`/post-detail?id=${post.id}`">{{
              post.title
            }}</router-link>
          </div>
          <div class="post-detail">
            <el-tag>{{ post.tag }}</el-tag>
            <x-user-detail-link
              :user-id="post.author?.id"
              :link-name="post.author?.name"
            />
            <span>{{ post.publishTime }}</span>
            <span>最后回复来自 {{ post.lastReplier?.name }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <el-empty :image-size="100" v-else description="暂时没有帖子嗷" />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

defineProps({
  posts: {},
});
const router = useRouter();
</script>

<style scoped>
.post-card {
  display: flex;
  margin-bottom: 10px;
}
.post-card:hover {
  transform: scale(1.1);
}
.avatar {
  margin-right: 10px;
}

.post-detail {
  margin-top: 10px;
}

.post-detail > * {
  margin-right: 10px;
}
</style>
